<template>
    <div class="login_box">
        <div class="chead">
            <div class="logo">
                <img src="http://windhunter.cn:7001/public/dist/static/logo.f0355d39.svg" alt="">
            </div>
            <div class="Btext">
                <span>猎风</span>
            </div>
            <div class="stext">
                  <span>猎风机房排课管理系统平台</span>
            </div>
             <div class="login">
                <span>账号密码登录</span>
            </div>
            <div class="line"></div>
        </div>
        <div class="main">
            <el-form class="loginFrom" ref="LoginFrom" :rules="rules" :model="LoginFrom">
                <el-form-item prop="username">
                    <el-input placeholder="请输入账号" prefix-icon="el-icon-user" v-model.number="LoginFrom.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="LoginFrom.password"></el-input>
                </el-form-item>
                <el-form-item prop="roleId">
                    <el-radio v-model="LoginFrom.roleId" label="1">用户</el-radio>
                    <el-radio v-model="LoginFrom.roleId" label="2">管理员</el-radio>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="Login('LoginFrom')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import global from '../components/Global'
export default {
  data () {
    var checkUsername1 = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('账号不能为空'))
      }
      setTimeout(() => {
        if ((value + '').length < 3 || (value + '').length > 15) {
          callback(new Error('账号必须是 3 到 15 位'))
        } else {
          callback()
        }
      }, 1000)
    }
    var checkPasseord = (rule, value, callback) => {
      if (!value) {
        callback(new Error('密码不能为空'))
      } else {
        if (value.length < 6 || value.length > 13) {
          callback(new Error('密码长度只能为 6 到 13 位'))
        }
        callback()
      }
    }
    return {
      LoginFrom: {
        username: '',
        password: '',
        roleId: ''
      },
      rules: {
        username: [
          { validator: checkUsername1, trigger: 'blur' }
        ],
        password: [
          { validator: checkPasseord, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    Login (formName) {
      this.$refs[formName].validate(async valid => {
        if (!valid) return
        this.$http.defaults.headers.post['Content-Type'] = 'application/json'
        const res = await this.$http.post('/user/login', JSON.stringify(this.LoginFrom))
        if (res.data.code !== 200) {
          this.$message.error('登录失败')
        }
        if (res.data.code === 200) {
          global.username = this.LoginFrom.username
          window.sessionStorage.setItem('user', res.data)
          if (this.LoginFrom.roleId === '1') {
            this.$router.push('/home')
          }
          if (this.LoginFrom.roleId === '0') {
            this.$router.push('/manage')
          }
          this.$message.success('登录成功')
        }
      })
    }
  }
}
</script>
<style>
.el-form-item__content{
  width: 100%;
}
</style>
<style lang="less" scoped>
.login_box{
  height: 100%;
  width: 100%;
  background-image: url(../assets/img/背景.png);
}
.chead{
  position: absolute;
  width: 60%;
  height: 50%;
  top: 20%;
  left: 48%;
  //background-color: red;
  transform: translate(-50%,-50%);
  .logo img{
    position: absolute;
    top: 30%;
    left: 44%;
    height: 44px;
    width: 44px;
  }
  .Btext span{
    font-size: 33px;
    font-family: Avenir,"Helvetica Neue",Arial,Helvetica,sans-serif;
    color-adjust: rgba(0,0,0,0.85);
    font-weight: 600;
    position: absolute;
    top: 30%;
    left: 50%;
  }
  .stext span{
    position: absolute;
    color: rgba(0,0,0,.45);
    font-size: 15px;
    left: 42%;
    top: 43%;
  }
  .login span{
    position: absolute;
    color: #faad14;
    font-weight: 500;
    outline: #faad14 none 2px;
    top: 60%;
    left: 45%;
  }
  .line{
    position: absolute;
    top: 67%;
    left: 45%;
    width: 96px;
    height: 2px;
    background-color: #faad14;
  }
}
.main{
  // background-color: blue;
  position: absolute;
  top: 60%;
  left: 50%;
  width: 30%;
  height: 50%;
  transform: translate(-50%,-50%);
}
.btns{
    width: 100%;
    .el-button{
      width: 100%;
    }
}
.loginFrom{
    position: absolute;
    top: 0;
    width: 100%;
    padding: 0 15%;
    box-sizing: border-box;
}
.loginFrom a{
  font-size: 10px;
  text-decoration: none;
  color: black;
  opacity: 0.8;
}
.loginFrom a:hover{
  color: blue;
}
</style>
